<template>
  <view class="group_card">
    <z-nav-bar id="nav" bgColor="#ffffff" title="还款"></z-nav-bar>
    <view class="title-box" >
      充值方式
    </view>
    <view class="box_wrap df align-center">
      <image src="../static/icon/iocn_wxpay.png"></image>
      <text class="mgl-15">微信支付</text>
    </view>
    <view class="title-box" >
      还款金额
    </view>
    <view class="box_wrap df align-center">
      <up-input
        placeholder="请输入还款金额"
        border="none"
        v-model="form.repaymentAmount"
        disabledColor="#F7F7F7"
        disabled
      ></up-input>
    </view>
    <view class="no_money mgt-16">
      待还款金额<text class="money_a">{{form.repaymentAmount}}</text>元
    </view>
    <view class="title-box" >
      备注
    </view>
    <view class="remark_box">
      <up-textarea border="none" v-model="form.paymentNotes" placeholder="请输入内容" ></up-textarea>
    </view>
    <view class="attention">
      注意：
      <view class="tips">
        1.相关提示
      </view>
    </view>
    <view class="bottom-btn-box">
      <main-button :color="'#fff'" :margin="'24rpx 0 0'" @click="submit">支付</main-button>
    </view>
  </view>
</template>

<script setup>
import { onReady ,onLoad} from '@dcloudio/uni-app'
import { reactive,toRefs} from 'vue'
import {customerPayGroupCardMoney} from '@/api/pagesMy/user'
import {setPlay} from '@/utils/common'
const state = reactive({
  form:{
    paymentNotes:''
  }
})
onLoad((options)=>{
  const  {groupCardNo,repaymentAmount,id} = options
  state.form ={
    groupCardNo,
    repaymentAmount,
    id,
    paymentNotes:''
  }
})
const {form} = toRefs(state)
const submit = () =>{
  // 获取页面栈
  customerPayGroupCardMoney({
    ...form.value,
    // repaymentAmount:0.01,
    paymentMethod:"WX_PAY"
  }).then(res=>{
    setPlay(res,()=>{
      uni.showToast({
        title: '还款成功',
        icon: 'none',
      })
      uni.$emit('refreshGroupCard')
      setTimeout(()=>{
        uni.navigateBack({
          detail:1
        })
      },2000)


    })
  })
}
</script>
<script>
export default {
  options:{
    styleIsolation: "shared"
  }
}
</script>
<style lang="scss" >
@import "../style/common.scss";
.group_card{
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 0 32rpx;
  .box_wrap{
    box-sizing: border-box;
    width: 100%;
    height: 80rpx;
    background-color: #F7F7F7;
    border-radius: 44rpx;
    padding-left: 34rpx;
    >image{
      width: 32rpx;
      height: 32rpx;
    }
    >text{
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
    }
  }
  .no_money{
    font-weight: 400;
    font-size: 28rpx;
    color: #AEAEAE;
    .money_a{
       color: #000000
    }
  }
  .remark_box{
    width: 100%;
    height: 240rpx;
    background: #F6F6F6;
    border-radius: 16rpx ;
  }
}
.attention{
  color: #AEAEAE;
  margin-top: 60rpx;
}
::v-deep  .u-textarea{
  background-color: #F6F6F6 !important;
}
</style>
